import React,{useState} from 'react';
import styles from './Table.less';
import { Table,Space,Tooltip,Popover,Radio} from 'antd';
import { SyncOutlined,ColumnHeightOutlined,SettingOutlined } from '@ant-design/icons';
import {SizeType} from "antd/lib/config-provider/SizeContext";
import TableSetting from "@/pages/test/List/components/TableSetting";
export type TestTableProps = {
  showTableBar?: boolean;
  loading?: boolean;
  columns?: []|any;
  dataSource?: []|any;
  size?: SizeType;
  bordered?: boolean;
  btnContent?: any;
};

const TestTableComponents: React.FC<TestTableProps> = (props) => {
  const { showTableBar,columns,dataSource,size,bordered,btnContent} = props;
  const toolBarIconStyle = {fontSize:'20px'};
  const [value, setValue] = useState(size);
  //构建列
  const buildColumns = (param: any) =>{
    const cols = param.filter((col: any) =>{
      if(!col.hasOwnProperty('showColumn')){
        //不存在隐藏显示列属性showColumn
        col['showColumn'] = true;
      }
      return col.showColumn == true;
    });
    return cols;
  }
  const [newColumns,setNewColumns] = useState(buildColumns(columns));

  const onChange = (e: any) => {
    setValue(e.target.value);
  };

  const tableSizeContent = (
    <Radio.Group onChange={onChange} value={value}>
      <Space direction="vertical">
        <Radio value="default" >默认</Radio>
        <Radio value="middle" >中等</Radio>
        <Radio value="small" >紧凑</Radio>
      </Space>
    </Radio.Group>
  );

  // 列排序
  const sortColumns = (arr: []) =>{
    setNewColumns(arr);
  }
  // 列隐藏
  const hideColumns = (arr: []) =>{
    setNewColumns(buildColumns(arr));
  }
  //表格设置
  const settingContent = (
    <TableSetting  columns={columns} sortColumns={sortColumns} hideColumns={hideColumns}/>
  )

  return (
    <div className={styles.container}>
      <div className={styles.toolbar} style={{display:(showTableBar?"block":"none")}}>
        <div className={styles.leftbtn}>
          {btnContent}
        </div>
        <Space className={styles.rightbtn}>
          <Tooltip placement="top" title="刷新">
            <SyncOutlined  spin style={toolBarIconStyle} className={styles.pointer}/>
          </Tooltip>
          <Popover placement="bottom"  content={tableSizeContent} trigger="click">
            <Tooltip placement="top" title="密度">
                <ColumnHeightOutlined style={toolBarIconStyle} className={styles.pointer}/>
            </Tooltip>
          </Popover>
          <Popover placement="leftBottom"  content={settingContent} trigger="click">
            <Tooltip placement="top" title="设置">
              <SettingOutlined  style={toolBarIconStyle} className={styles.pointer}/>
            </Tooltip>
          </Popover>
        </Space>
      </div>
      <Table columns={newColumns} dataSource={dataSource}  size={value} bordered={bordered} rowKey={record => record.code} />
    </div>
  );
}
export default TestTableComponents;
